<section id="jwk-list" class="ml-24 mr-24 pb-20">
	<hl-page-header title="租赁预约"></hl-page-header>

	<div class="clearfix mt-10 relative">
		<div class="pr-15 pull-left">
      <p class="color-cfcfcf">信息检索</p>
      <div class="global_search">
        <span class="icon-Gm-search"></span>
        <input autocomplete="off" type="text" class="global_ipt_text" v-model="keyword" placeholder="房源/预约人/预约电话" style="width:180px" />
      </div>
    </div>
		<div class="pr-15 pull-left">
		  <p class="color-cfcfcf">园区</p>
		  <div class="div">
		    <hl-autoComplete :data="parkList" width="155" :fetch-suggestions="getParkData" v-model="parkInfo.name" type="default"
		    	@on-change="selectParkId" placeholder="请输入"></hl-autoComplete>
		  </div>
		</div>
		<div class="pr-15 pull-left">
		  <p class="color-cfcfcf">区域</p>
		  <div class="div">
		    <hl-select width="140" class="mr-5" :data="cityList" v-model="selectCityData" @on-change="selectCity"></hl-select>
		    <hl-select width="140" :data="districtList" v-model="selectDistrictData" @on-change="selectDistrict"></hl-select>
		  </div>
		</div>
		<div class="pr-15 pull-left" v-if="isExtenseFlag">
		  <p class="color-cfcfcf">预约时间</p>
		  <div class="div dy-flex">
		    <web-calendar v-model="orderStartDate" tips="开始时间" width="120" class="mr-10"></web-calendar>
		    <web-calendar v-model="orderEndDate" tips="结束时间" width="120" :beforedate="orderStartDate" position="fixed"></web-calendar>
		  </div>
		</div>
		<div class="pull-left mt-10" style="width: 276px;" v-if="isExtenseFlag">

			<div class="pull-left">
			  <p class="color-cfcfcf">提交时间</p>
			  <div class="div dy-flex">
			    <web-calendar v-model="submitStartDate" tips="开始时间" width="120" class="mr-10"></web-calendar>
			    <web-calendar v-model="submitEndDate" tips="结束时间" width="120" :beforedate="submitStartDate"></web-calendar>
			  </div>
			</div>
		</div>
		<div class="pull-left" :style="{'margin-top': !isExtenseFlag ? '19px' : '29px'}">
			<hl-button @on-click="querySearch">查询</hl-button>
			<hl-button @on-click="resetSearch">重置</hl-button>
		</div>
		<div class="global_open_sign" @click="openSearch">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
	</div>

	<div class="relative clearfix">
		<div class="pull-left">
			<hl-checkbox-button :data="menuData"  v-model="selectedData" width="100" @on-click="selectCheckbox" inline merge></hl-checkbox-button>
		</div>
		<span class="global_refresh_icon icon-uniE94B pull-left" style="margin-left: 20px;margin-top: 13px;" @click="resetMenu"></span>
	</div>

	<div class="dy-flex mt-10 global_table border" ref="vs">
		<div style="width: 850px;" class="hl-scroll-container">
			<vue-scroll :ops="ops" ref="scrollWrap" @handle-scroll="handleComplete">
				<div class="dy-flex config-table-title-wrap" style="width: 950px;">
					<div class="dy-fx-1 config-table-title-item global_table_title">序</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">预约人</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">预约人电话</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">房源</div>
					<div class="dy-fx-2 config-table-title-item global_table_title">园区</div>
					<div class="dy-fx-3 config-table-title-item global_table_title">区域</div>
					<div class="dy-fx-3 config-table-title-item global_table_title cursor" @click="sortDate('AT')">
						<span>预约时间</span>
						<span :class="{'icon-Gm-sort-default': column != 'AT', 'icon-Gm-sort-ascending': column == 'AT' && order == 'A', 'icon-Gm-sort-descending': column == 'AT' && order == 'D'}">
							<span class="path1"></span><span class="path2"></span>
						</span>
					</div>
					<div class="dy-fx-3 config-table-title-item global_table_title cursor" @click="sortDate('ST')">
						<span>提交时间</span>
						<span :class="{'icon-Gm-sort-default': column != 'ST', 'icon-Gm-sort-ascending': column == 'ST' && order == 'A', 'icon-Gm-sort-descending': column == 'ST' && order == 'D'}">
							<span class="path1"></span><span class="path2"></span>
						</span>
					</div>
					<div class="dy-fx-2 config-table-title-item global_table_title">状态</div>
				</div>
				<div @mouseenter="rowIndex = index" @mouseleave="rowIndex = null" :class="{hoverColor:rowIndex == index}" class="dy-flex line-height-40 text-center table-padding-4 global_table_item" style="width: 950px;" v-for="(item, index) in dataObj.appointments">
					<div class="dy-fx-1 ellipsis-1">{{ index+1 }}</div>
					<div class="dy-fx-3 ellipsis-1">{{ item.appointmentPerson }}</div>
					<div class="dy-fx-3 ellipsis-1">{{ item.phoneNum }}</div>
					<div class="dy-fx-3 ellipsis-1">{{ item.officeName }}</div>
					<div class="dy-fx-2 ellipsis-1">{{ item.parkName }}</div>
					<div class="dy-fx-3 ellipsis-1">{{ item.cityName }} - {{ item.districtName }}</div>
					<div class="dy-fx-3 ellipsis-1">{{ item.appointmentTime | formatDate }}</div>
					<div class="dy-fx-3 ellipsis-1">{{ item.submitTime | formatDate }}</div>
					<div class="dy-fx-2 ellipsis-1">{{ item.statusName || '--' }}</div>
				</div>
			</vue-scroll>
		</div>
		<div class="border-l text-center line-height-40 dy-fx-1">
			<div class="border-b" style="background-color: #F0F2FF;color: #A5AAB7;line-height: 39px;">操作</div>
			<div></div>
			<div class="global_table_item" v-for="(item, index) in dataObj.appointments" @mouseenter="rowIndex = index" @mouseleave="rowIndex = null" :class="{hoverColor:rowIndex == index}">
				<a href="javascript:;" @click="isShowKuanKuan(item.id)" v-if="item.status == 'TBA'"  v-show="power.indexOf('c339') > -1">成交</a>
				<a href="javascript:;" @click="isErrorKK(item.id)" v-if="item.status == 'TBA'" v-show="power.indexOf('c340') > -1">关闭</a>
				<a href="javascript:;" @click="toDetailPage(item)">详情</a>
			</div>
		</div>
	</div>

	<div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{ dataObj.totalCount || '0' }}</i>条记录</span>
      <span>每页
			<hl-select  width="80" :data="limitCount" v-model="limit" @on-change="limitCountSet"></hl-select>
        条</span>
    </div>
    <div class="pull-right">
      <hl-pagination :total="dataObj.totalPage" @change="pagination"></hl-pagination>
    </div>
  </div>

	<hl-dialog title="成交" :visible="isSuccesDialog" @on-close="isShowKuanKuan">
    <textarea rows="6" class="form-control" placeholder="请填写成交记录(非必填)" v-model="successText"></textarea>
    <div slot="footer">
        <hl-button type="primary" @on-click="submitSuccess">确定</hl-button>
        <hl-button type="outline" @on-click="isShowKuanKuan">取消</hl-button>
    </div>
	</hl-dialog>

	<hl-dialog title="关闭" :visible="isErrorDialog" @on-close="isErrorKK">
	  <textarea rows="6" class="form-control" placeholder="请填写关闭原因(必填)" v-model="errorText"></textarea>
	  <div slot="footer">
	      <hl-button type="primary" @on-click="submitError">确定</hl-button>
	      <hl-button type="outline" @on-click="isErrorKK">取消</hl-button>
	  </div>
	</hl-dialog>
</section>

<style type="text/css">
	.table-padding-4>div {
		padding: 0 4px;
	}
	.global_open_sign{
		bottom: 0;
	}
	.hoverColor{
		background-color: #F0F0F7!important
	}
</style>

<script src="modules/jwk/scripts/jwk_order_list.js" charset="utf-8"></script>
